<template>
  <div>
    <Typenav></Typenav>
    <Container></Container>
    <Recommend></Recommend>
    <Rank></Rank>
    <Like></Like>
    <Floor v-for="(item, index) in lists" :key="index" :list="item"></Floor>
    <Brand></Brand>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Recommend from "./Recommend/index.vue";
import Container from "./Container/index.vue";
import Rank from "./Rank/index.vue";
import Like from "./Like/index.vue";
import Floor from "./Floor/index.vue";
import Brand from "./Brand/index.vue";
export default {
  components: {
    Recommend,
    Container,
    Rank,
    Like,
    Floor,
    Brand,
  },
  data() {
    return {};
  },
  computed: {
    //以后vuex中发的ajax请求同意用computed属性接受(不能用data)
    ...mapState({
      lists: (state) => state.home.floorList,
    }),
  },
  watch: {
    //且vuex中发送的aja可能要用watch监视+$nexttick。异步请求后怕有些实例需要依赖于原来的组件而此时组件并未渲染
  },
  mounted() {
    this.$store.dispatch("getFloorList"); //在父组件中获取数据便于遍历
    this.$store.dispatch('getUserInfo');
  },
};
</script>

<style scoped lang="less">
</style>